<!-- /*
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
*/ -->
<template>
  <div>
    <DialogTemplate
      ref="DialogTemplateRef"
      v-bind="dialogData"
      @closeHanler="closeHanler"
    >
      <div slot="outerMain" style="padding: 0px 20px">
        <el-form :model="fromData" ref="formRef" :rules="rulesRul">
          <el-form-item label="老人姓名" prop="oldname">
            <el-input
              :disabled="true"
              placeholder="请输入"
              v-model="fromData.oldname"
            ></el-input>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="家属姓名" prop="familyName">
                <el-input
                  :disabled="this.fromDisabled"
                  placeholder="请输入"
                  v-model="fromData.familyName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别" prop="familySex">
                <br />
                <el-radio v-model="fromData.familySex" label="男">男</el-radio>
                <el-radio v-model="fromData.familySex" label="女">女</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年龄" prop="familyAge">
                <el-input
                  :disabled="this.fromDisabled"
                  placeholder="请输入"
                  v-model="fromData.familyAge"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="职务" prop="familyDuties">
                <el-input
                  :disabled="this.fromDisabled"
                  placeholder="请输入"
                  v-model="fromData.familyDuties"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="身份证号" prop="familyIDCard">
                <el-input
                  :disabled="this.fromDisabled"
                  placeholder="请输入"
                  v-model="fromData.familyIDCard"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="手机号" prop="familyMobilePhone">
                <el-input
                  :disabled="this.fromDisabled"
                  placeholder="请输入"
                  v-model="fromData.familyMobilePhone"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="关系" prop="familyRelationship">
                <el-input
                  :disabled="this.fromDisabled"
                  placeholder="请输入"
                  v-model="fromData.familyRelationship"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="家庭住址" prop="familyAdress">
                <br />
                <div class="flexStyleTwo">
                  <!-- <VDistpicker 
                    @selected="onSelected" 
                    v-if="!this.fromDisabled" 
                    :province=adress.province
                    :city=adress.city
                    :area=adress.area>
                  </VDistpicker> -->
                  <el-input
                    placeholder="请输入详细地址"
                    v-model="fromData.familyAdress"
                    :disabled="this.fromDisabled"
                  ></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="outerFooter" v-if="!this.fromDisabled">
        <el-button @click="($event) => buttonClickHandler(0)">取消</el-button>
        <el-button type="primary" @click="($event) => buttonClickHandler(1)"
          >保存</el-button
        >
      </div>
      <div slot="outerFooter" v-else>
        <el-button @click="($event) => buttonClickHandler(0)">关闭</el-button>
      </div>
    </DialogTemplate>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";
import { editFamilyMessage } from "@/api/oldPeople";
import DialogTemplate from "@/components/DialogTemplate.vue";
import UploadTemplate from "@/components/UploadTemplate.vue";
import { dressingByScreening } from "@/components/config/index";
export default {
  components: {
    DialogTemplate,
    UploadTemplate,
    VDistpicker,
  },
  name: "taskInFoDialog",
  data() {
    return {
      dialogData: {
        title: "默认为测试标题",
        outWidth: "50%",
        destroyOnClose: true,
        top: "140px",
      },

      fromData: {
        oldname: "",
        familyName: "",
        familyDuties: "",
        familySex: "",
        familyIDCard: "",
        familyAge: "",
        familyRelationship: "",
        familyMobilePhone: "",
        familyAdress: "",
      },
      rulesRul: {
        familySex: [
          { required: true, message: "必须绑定一位老人姓名", trigger: "blur" },
        ],
        familyName: [
          { required: true, message: "家属姓名不能为空", trigger: "blur" },
        ],
        familySex: [
          { required: true, message: "性别不能为空", trigger: "blur" },
        ],
        familyAge: [
          { required: true, message: "年龄不能为空", trigger: "blur" },
        ],
        familyDuties: [
          { required: true, message: "职务不能为空", trigger: "blur" },
        ],
        familyAdress: [
          { required: true, message: "家庭住址不能为空", trigger: "blur" },
        ],
        familyIDCard: [
          { required: true, message: "身份证号不能为空", trigger: "blur" },
        ],
        familyMobilePhone: [
          { required: true, message: "请完善联系方式", trigger: "blur" },
        ],
        familyRelationship: [
          { required: true, message: "关系为必填项", trigger: "blur" },
        ],
        fileList: [],
      },
      fromDisabled: true,
    };
  },

  methods: {
    //开启弹框
    handleOpen(val, titleType) {
      console.log(val, titleType);
      //1.打开弹框，并为弹框赋值标题
      this.$refs.DialogTemplateRef?.openDialogOne();
      this.dialogData.title = "家属信息 -- " + titleType;
      //2.打开弹框后 判断里面的数据是否可以编辑
      this.fromDisabled = titleType == "编辑" ? false : true;
      //3.为页面赋初始值
      if (val) {
        this.fromData = dressingByScreening({ ...this.fromData }, { ...val });
        this.fromData.fmID = val.fmID;
      }
    },
    //弹出框关闭的回调
    closeHanler() {
      this.$refs.formRef.resetFields();
    },
    //保存/取消按钮点击事件
    buttonClickHandler(type) {
      if (type) {
        this.$refs.formRef.validate((vaild) => {
          if (!vaild) return;
          this.getWebData(this.fromData);
        });
      } else {
        //取消操作
        this.$refs.DialogTemplateRef?.closeDialogOne();
      }
    },
    //地址选择的回调
    onSelected(data) {
      this.fromData.familyAdress =
        data.province.value + data.city.value + data.area.value;
    },
    getWebData(vaild) {
      editFamilyMessage(vaild).then((res) => {
        if(res.data.acknowledged){
          this.$notify.success({ title: "提示", message: "编辑成功" });
          this.$emit("taskFoDialo",{})
          this.$refs.DialogTemplateRef?.closeDialogOne();
        }else{
          this.$notify.error({ title: "提示", message: "编辑失败" });
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.flexStyleTwo {
  display: flex;
  height: 20px;
}
:deep(.distpicker-address-wrapper select) {
  height: 30px;
  padding: 0px 15px;
  max-width: 150px;
  width: 150px;
}
</style>
